Day5 跟著官方文件學習Laravel-把Request丟給Controller去處理

2021 iThome 鐵人賽

DAY 5

Software Development

跟著官方文件學習Laravel, 並實作出一個會員登入系統系列第 5 篇

13th鐵人賽

jimchien

2021-09-19 08:43:09

2532 瀏覽

分享至

回顧一下昨天，我們已經能透過route+view讓登入頁面顯示在畫面上了，今天的任務呢，就是要把登入頁經由form表單傳送的值，送給後端讓Controller能接到Request傳的值。

在昨天的login.blade.php中我們的html長這樣，這時我們在form表單中加上@csrf保護

#login.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>login</title>
</head>
<body>
    <h1>登入畫面</h1>
    <form action='/login' method='POST'>
        @csrf
        帳號：<input type='text' name='account'><br/>
        密碼：<input type='password' name='password'><br/>
        <button type='submit'>登入</button>
    </form>
</body>
</html>

偷偷按下f12可以看到多了一個_token，幫我們驗證身份

我們要來實作一個route能夠導到controller，因為我們只有一個方法，所以我們就用__invoke實作就可以了。app/Http/Controllers在這生成檔案吧

<?php

namespace App\Http\Controllers;

class LoginController extends Controller
{
    public function __invoke(){

    }
}

好了，現在我們檔案建好後，我們要讓form表單的資訊能夠送到這個controller，我們必須透過路由幫我們連接。所以我們在routes/web.php中加上一個路由，傳到哪邊呢，要看我們的form的action以及他的傳送方法method決定我們的路由怎麼接，而我們的表單設計的路徑是/login，方法是post，了解後就動工囉

Route::post('/login', LoginController::class);

若你的controller有多個方法可以用array傳遞，後面放你要接收的方法名稱

Route::get('/user/{id}', [UserController::class, 'show']);

道路都建好了，不過我們怎麼在controller中獲取request呢？這邊官方提供一個方法，就是直接在方法上傳遞一個參數$request，laravel就會自動透過依賴注入的方式透過service provider注入：

class LoginController extends Controller
{
    public function __invoke(Request $request){
        dd($request);
    }
}

我們試著把它印出來吧，回到登入頁，我們打上帳號密碼後送出
接著畫面會顯示出你這次請求的一些資訊，其中包含parameters
裡面有記錄著打入的帳號密碼以及剛剛看到的_token值，用來做CSRF保護

好，接著我們試著回傳一些資訊，利用$request->input()的話可以取得所有傳入的值，我們如果想把我們傳入的帳號印出來，可以用 $request->input('account')取得值

class LoginController extends Controller
{
    public function __invoke(Request $request){
        return "你好，我的帳號是".$request->input('account');
    }
}

接著，我們再重新打一次帳號密碼按下登入，就會成功回傳值啦！

我們今天的任務達成，讓controller成功接到我們想要傳的值，接著明天要學習如何使用DB，先進行設定，在本機弄出一個DB來用。